<template lang="pug">
.shop_index
    .index_header
        video(:poster="vider" loop="true" muted="ture" autoplay="true")
            source(:src="sd" type="video/webm")
    .shop_content
        .game_type_filter
            .game_tags_header(@dblclick="()=>{checkedTypeList.length=0}") Game Type
                ul
                    li(v-for="(item,index) in GameTypes.slice(0,26)" )
                        label(:class="{isChecked:checkedTypeList.includes(item.id)}") {{item.description}}
                            input(type="checkbox" :value="item.id" v-model="checkedTypeList" )
        .index_card_show
            ul
                .gameBigCard
                    li(v-for="(item,index) in ResultBigCard" :key="index" )
                        GameBigCard(:gi="item" v-show="index<5 && showBigIndex==index" )
                        .bottom_index(:style="{'margin-left':index*200+'px',opacity:showBigIndex==index?1:0.3}")
            .gameIndexCard
                table
                    tr
                        th
                        th
                        th
                        th
                    tr(v-for="(item,index) in ResultGames.slice(0,ResultGames.length-ResultGames.length%4)" :key="index" v-show="index%4==0" )
                        td
                            GameIndexCard(:gi="ResultGames[index]")
                        td
                            GameIndexCard(:gi="ResultGames[index+1]" )
                        td
                            GameIndexCard(:gi="ResultGames[index+2]" )
                        td
                            GameIndexCard(:gi="ResultGames[index+3]" )


</template>
<script setup lang="ts">
import {defineAsyncComponent, onBeforeMount, onMounted, onUnmounted, ref, watchEffect} from 'vue'
import {GameInfoByType, GetGameInfoAll} from "../../reqApi/Game";
import type {ResultInfo} from "../../utils/types/ResultInfo";
import type {GameObj} from "../../utils/types/Game";
import {useRouter} from "vue-router";
import {LogSuccess} from "../../utils/notification/Index";

const GameIndexCard = defineAsyncComponent(() =>
    import("../utils/game/GameIndexCard.vue")
)

const GameBigCard = defineAsyncComponent(() =>
    import("../utils/game/GameBigCard.vue")
)
onBeforeMount(() => {
})
const router = useRouter();
const checkedTypeList = ref<number[]>([])

const GameTypes = ref([
    {id: 1, description: "Multi-player"},
    {id: 2, description: "Single-player"},
    {id: 8, description: "Valve Anti-Cheat enabled"},
    {id: 9, description: "Co-op"},
    {id: 13, description: "Captions available"},
    {id: 15, description: "Stats"},
    {id: 16, description: "Includes Source SDK"},
    {id: 17, description: "Includes level editor"},
    {id: 18, description: "Partial Controller Support"},
    {id: 20, description: "MMO"},
    {id: 22, description: "Steam Achievements"},
    {id: 23, description: "Steam Cloud"},
    {id: 24, description: "Shared/Split Screen"},
    {id: 25, description: "Steam Leaderboards"},
    {id: 27, description: "Cross-Platform Multiplayer"},
    {id: 28, description: "Full controller support"},
    {id: 29, description: "Steam Trading Cards"},
    {id: 30, description: "Steam Workshop"},
    {id: 31, description: "VR Support"},
    {id: 32, description: "Steam Turn Notifications"},
    {id: 35, description: "In-App Purchases"},
    {id: 36, description: "Online PvP"},
    {id: 37, description: "Shared/Split Screen PvP"},
    {id: 38, description: "Online Co-op"},
    {id: 39, description: "Shared/Split Screen Co-op"},
    {id: 40, description: "SteamVR Collectibles"},
    {id: 41, description: "Remote Play on Phone"},
    {id: 42, description: "Remote Play on Tablet"},
    {id: 43, description: "Remote Play on TV"},
    {id: 44, description: "Remote Play Together"},
    {id: 47, description: "LAN PvP"},
    {id: 48, description: "LAN Co-op"},
    {id: 49, description: "PvP"},
    {id: 51, description: "Steam Workshop"},
    {id: 52, description: "Tracked Controller Support"},
    {id: 53, description: "VR Supported"}
])
const vider = ref("https://cdn.cloudflare.steamstatic.com/steam/clusters/frontpage/9d9223993f4b13265de42917/page_bg_english.jpg?t=1682015108")
const sd = ref("https://cdn.cloudflare.steamstatic.com/steam/clusters/frontpage/9d9223993f4b13265de42917/mp4_page_bg_english.mp4?t=1682015108")
const ResultGames = ref<GameObj[]>([])
const ResultBigCard = ref<GameObj[]>([])


const InitAllGameInfo = () => {
    GetGameInfoAll().then(resp => {
        const result = resp.data as ResultInfo<GameObj[]>
        if (result.success) {
            ResultGames.value = result.data?.slice(5) || []
            ResultBigCard.value = result.data?.slice(0, 5) || []
        }
    })
}
const showBigIndex = ref(0)


let CarouseIndex: number = 0
const GameByType = () => {
    if (checkedTypeList.value.length <= 0) {
        InitAllGameInfo()
        return
    }
    let numbers = checkedTypeList.value.map(Number);
    GameInfoByType({type_ids: numbers}).then(resp => {
        const result = resp.data as ResultInfo<GameObj[]>;
        LogSuccess(result.msg)
        if (result.success) {
            ResultGames.value = result.data || []
        }

    })

}
watchEffect(() => {
    GameByType()
})

function setTime() {
    let index = 0
    CarouseIndex = setInterval(() => {
        index++
        showBigIndex.value = index % 5
        if (index == 5) {
            index = 0
        }

    }, 3000);
}

onMounted(() => {
    InitAllGameInfo()
    setTime()
})
onUnmounted(() => {
    clearInterval(CarouseIndex)
})


</script>


<style lang="sass" scoped>
@import "../../assets/sass/index/indexShow"


</style>
